<template>
  <div class="v-header v-shadow v-radius v-flex">
    <div class="header-left v-flex">
      <slot name="header-left" />
      <!-- trigger -->
      <div v-if="triggerIcon" class="header-trigger">
        <apple-button
          hide-shadow
          icon-width="1.5em"
          icon-height="1.5em"
          :icon-color="triggerColor"
          :border="false"
          :icon="triggerIcon"
          :styles="{ padding: '0 15px', background: 'transparent', height: '100%', color: triggerColor }"
          @click="$emit('trigger')"
        />
      </div>
      <!-- breadcrumb -->
      <div v-if="breadcrumb" class="header-breadcrumb">
        <breadcrumb />
      </div>
    </div>
    <div class="header-right v-flex">
      <slot name="header-right" />
      <!-- search-bar -->
      <div v-if="searchBar" class="header-search-bar v-m-r">
        <search-bar v-model="searchValue" hide-shadow @search="$emit('search', searchValue)" />
      </div>
      <!-- refresh(刷新) -->
      <div v-if="refresh" class="header-refresh v-m-l v-m-r">
        <apple-button
          hide-shadow
          icon="icon-icon_A"
          icon-width="1.5em"
          icon-height="1.5em"
          :border="false"
          :styles="{ background: 'transparent', padding: '0 10px', height: '100%', color: primaryColor }"
          @click="onRefresh"
        />
      </div>
      <!-- 全屏 -->
      <div v-if="fullScreen" class="header-full-screen v-m-l v-m-r">
        <apple-button
          hide-shadow
          icon="icon-fangda"
          icon-width="1.5em"
          icon-height="1.5em"
          :border="false"
          :styles="{ background: 'transparent', padding: '0 10px', height: '100%', color: primaryColor }"
          @click="onFullScreen"
        />
      </div>
      <!-- message -->
      <div v-if="message" class="header-message v-m-l v-m-r">
        <apple-button
          hide-shadow
          icon="icon-tongzhi1"
          icon-width="1.5em"
          icon-height="1.5em"
          :border="false"
          :styles="{ background: 'transparent', padding: '0 10px', height: '100%', color: primaryColor }"
        />
      </div>
      <!-- 个人信息 -->
      <div v-if="profile" class="header-profile v-m-l">
        <apple-button
          :border="false"
          :hide-shadow="true"
          :styles="{ background: 'transparent', padding: '0', paddingRight: '10px', height: '100%', color: '#000' }"
        >
          <div class="header-profile-container v-flex">
            <img src="@/assets/profile.jpeg" alt="头像" class="v-radius v-m-r" />
            <span :style="{ color: g_color }">{{ username }}</span>
          </div>
        </apple-button>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { ref, defineProps, inject, defineEmit, defineComponent } from 'vue';
import { useRoute } from 'vue-router';
import AppleButton from '@/components/apple/AppleButton.vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import SearchBar from "@/components/SearchBar.vue";
import { $_emit } from '@/utils/eventBus';
import { IMessage } from '@/interface/IUse';
import { primaryColor } from '@/config/layout.ts';

export default defineComponent({
  components: {
    AppleButton,
    Breadcrumb,
    SearchBar
  },
  props: {
    triggerColor: {
        type: String,
        default: primaryColor
      },
      triggerIcon: {
        type: String,
        default: 'custom-icon-caidan1'
      },
      breadcrumb: {
        type: Boolean,
        default: true
      },
      searchBar: {
        type: Boolean,
        default: true
      },
      refresh: {
        type: Boolean,
        default: true
      },
      fullScreen: {
        type: Boolean,
        default: true
      },
      profile: {
        type: Boolean,
        default: true
      },
      message: {
        type: Boolean,
        default: true
      }
  },
  emits: ['trigger', 'search'],
  setup(props, context) {
    const emit = context.emit;
    const route = useRoute();
    const g_bg = inject('$bg');
    const g_color = inject('$color');
    const $message: IMessage = inject('message') as IMessage;
    const searchValue = ref('');
    const username = ref('veloma');
    const _fullScreen = ref(false);
    const onFullScreen = () => {
      const body = document.body;
      _fullScreen.value
        ? document.exitFullscreen()
        : body.requestFullscreen().then(() => {
          $message({ type: 'success', content: '按 esc 或 点击全屏按钮 退出全屏模式' })
        }).catch(() => {
          $message('打开全屏失败，请重试！')
        });
      _fullScreen.value = !_fullScreen.value;
    };
    const onRefresh = () => $_emit('refresh', route);
    return {
      route,
      g_bg,
      g_color,
      $message,
      searchValue,
      username,
      _fullScreen,
      onFullScreen,
      onRefresh
    }
  }
})

</script>

<style scoped>
.v-header {
  width: 99%;
  height: 50px;
  background: v-bind(g_bg);
  color: v-bind(g_color);
  margin: 5px auto;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}
.header-left,
.header-right {
  height: 100%;
}
.header-refresh,
.header-full-screen,
.header-trigger,
.header-message,
.header-profile {
  height: 80%;
}
.header-profile-container {
  height: 100%;
}
.header-profile-container > img {
  height: 90%;
}
</style>